<template>
	<view>
		<!--积分商城-->
		
<!-- 		<image src="/static/images/score_shop.png" class="score-shop-image"></image>
 -->		
		<view class="bg-header" :style="{ paddingTop: iStatusBarHeight + 'px' }">
			<view class="cu-bar">
				<view class="action" @click="back()">
					<text class="wlIcon-fanhui1 text-white"></text>
				</view>
				<view class="content text-bold text-white">
					积分商城
				</view>
			</view>
		</view>
		
		<view class="header-box">
			<view class="score-box">
				<view class="score-title-main">我的积分商城寄售订单</view>
				<view class="score-icon">
					<view class="score-item" 
					v-for="(item,index) in categoryList" :key="index"
					@click="$wanlshop.auth(item.path)"
					>
						<image :src="item.image" class="score-image"></image>
						<text class="score-title">{{item.name}}</text>
					</view>
					
				</view>
			</view>
		</view>
		
		<view class="flex mt120">
			<view class="detail-left" @click="changeTabType(0)">
				<text :class="tab_type===0 ? 'detail-title-avtive' : 'detail-title'">匹配单</text>
				<text :class="tab_type===0 ? 'detail-line-active' : 'detail-line'"></text>
			</view>
			
			<view class="detail-left" @click="changeTabType(1)">
				<text :class="tab_type===1 ? 'detail-title-avtive' : 'detail-title'">公司单</text>
				<text :class="tab_type===1 ? 'detail-line-active' : 'detail-line'"></text>
			</view>
		</view>
		
		<view class="shop-box">
			<view class="item" v-for="(item,index) in dataList" :key="index">
				<image :src="item.image" class="shop-image"></image>
				<view class="text-cut shop-title">{{item.name || ''}}</view>
				<view class="shop-price">{{item.price || ''}}</view>
				<view class="shop-btn" @click="buyGood(item)">立即购买</view>
			</view>
		</view>
		
		
		
		<uni-load-more :status="status" :content-text="contentText" />
		
		<view class="cu-modal bottom-modal" :class="showBuyPiPei ? 'show' : ''">
			<view class="cu-dialog" style="background: #F7F7F7;">
				<view class="cu-bar justify-end">
					<view class="confirm-title">确认订单</view>
					<view class="action text-blue" @tap="hideBuyModal">
						<image src="/static/images/close.png" class="close-image"></image>
					</view>
				</view>
				<view class="flex align-center justify-center flex-direction">
					<view class="product-box">
						<image :src="curGoods.image" class="product-image"></image>
						
						<view class="flex flex-direction align-start justify-between">
							<view class="product-title text-cut-2">{{curGoods.name || ''}}</view>
							<view class="product-price">{{curGoods.price || ''}}</view>
						</view>
					</view>
					
					<view class="info-box" v-if="curType === 0">
						<view class="info-input-box">
							<view class="input-title">买家姓名</view>
							<input type="text" placeholder="请输入买家姓名" v-model="name"/>
						</view>
						
						<view class="info-input-box">
							<view class="input-title">买家电话</view>
							<input type="text" placeholder="请输入电话" v-model="phone"/>
						</view>
					</view>
					
					<view class="submit-btn" @click="submitPipei()">提交订单</view>
				</view>
			</view>
		</view>
		
		
		
		<view class="cu-modal bottom-modal" :class="showBuyGongsi ? 'show' : ''">
			<view class="cu-dialog" style="background: #F7F7F7;">
				<view class="cu-bar justify-end">
					<view class="confirm-title">确认订单</view>
					<view class="action text-blue" @tap="hideBuyInfoModal">
						<image src="/static/images/close.png" class="close-image"></image>
					</view>
				</view>
				<view class="flex align-center justify-center flex-direction">
					<view class="product-box">
						<image :src="curGoods.image" class="product-image"></image>
						
						<view class="flex flex-direction align-start justify-between">
							<view class="product-title text-cut-2">{{curGoods.name || ''}}</view>
							<view class="product-price">{{curGoods.price || ''}}</view>
						</view>
					</view>
					
					<view class="choose-box">
						<view class="wuliu">选择收货方式</view>
						
						<view class="flex justify-between">
							<view :class="curType ===0 ? 'choose-btn-active' : 'choose-btn2'" @click="changeCurType(0)">
								平台寄售 
								<image src="/static/images/gou_bg.png" class="choose-bg-image" v-if="curType ===0"></image>
								<image src="/static/images/gou.png" class="choose-image" v-if="curType ===0"></image>
							</view>
							
							<view :class="curType ===1 ? 'choose-btn-active' : 'choose-btn2'" @click="changeCurType(1)">
								发货回家
								<image src="/static/images/gou_bg.png" class="choose-bg-image" v-if="curType ===1"></image>
								<image src="/static/images/gou.png" class="choose-image" v-if="curType ===1"></image>
							</view>
						</view>
					</view>
					
					<view class="info-box" v-if="curType === 0">
						<view class="info-input-box">
							<view class="input-title">收款人姓名</view>
							<input type="text" placeholder="请输入收款人姓名" v-model="name"/>
						</view>
						
						<view class="info-input-box">
							<view class="input-title">收款人电话</view>
							<input type="text" placeholder="请输入电话" v-model="phone"/>
						</view>
						
						<view class="info-image-box">
							<view class="input-title">上传收款二维码</view>
							<view class="photo-image-box" @click="handleImage()" v-if="!showImage">								
								<image src="/static/images/photo.png" class="photo-image"></image>
								<view class="photo-title">上传照片</view>
							</view>
							
							<view  class="photo-image-box2" @click="handleImage()"  v-if="showImage">
								<image :src="showImage" v-if="showImage" class="photo-image2"></image>
							</view>
						</view>
					</view>
					
					<view class="info-box" v-if="curType === 1">						<view class="info-input-box">							<view class="input-title">姓名</view>							<input type="text" placeholder="请输入姓名" v-model="name"/>						</view>
						<view class="info-input-box">							<view class="input-title">电话</view>							<input type="text" placeholder="请输入电话" v-model="phone"/>
						</view>
						<view class="info-input-box">
							<view class="input-title">详细地址</view>
							<input type="text" placeholder="请输入详细地址" v-model="address"/>
						</view>					</view>
					
					<view class="footer-box">
						<view class="flex">
							<view class="heji">合计:</view>
							<view class="footer-price">{{curGoods.price || ''}}</view>
						</view>
						
						<view class="pay_now" @click="submitGongsi()">立即支付</view>
					</view>
				</view>
			</view>
		</view>
		
		
		
		
	</view>
	
</template>

<script>
import { mapState } from 'vuex';

export default {
	data() {
		return {
			categoryList:[
				{
					image:'/static/images/shop/5.png',
					name:'全部',
					path:'/pages/new/order?state=0',
				},
				{
					image:'/static/images/shop/3.png',
					name:'寄售中',
					path:'/pages/new/order?state=3',
				},
				{
					image:'/static/images/shop/1.png',
					name:'待支付',
					path:'/pages/new/order?state=1',
				},
				{
					image:'/static/images/shop/2.png',
					name:'待收款',
					path:'/pages/new/order?state=2',
				},
				{
					image:'/static/images/shop/4.png',
					name:'已寄售',
					path:'/pages/new/order?state=4',
				}
			],
			showBuyPiPei:false,
			showBuyGongsi: false,
			iStatusBarHeight:0,
			tab_type:0, //0 匹配单，1 公司单
			curGoods:{},
			curType:0,//0 寄售 1发货回家
			name:'',
			phone:'',
			address:'',
			showImage:'',
			
			dataList: [],
			reload: false, //判断是否上拉
			total: 0, //数据量
			current_page: 1, //当前页码
			last_page: 1, //总页码
			status: 'more',
			contentText: {
				contentdown: ' ',
				contentrefresh: '加载中',
				contentnomore: ''
			}
		}
	},
	computed: {
		...mapState(['user', 'statistics','common'])
	},
	onLoad() {
		this.iStatusBarHeight = uni.getSystemInfoSync().statusBarHeight
		
		//#ifdef H5
		this.iStatusBarHeight = 36;
		//#endif
		
		this.loadData();
	},
	onPullDownRefresh() {
		this.current_page = 1;
		this.reload = true;
		this.loadData();
	},
	onReachBottom() {
		//判断是否最后一页
		if (this.current_page >= this.last_page) {
			this.status = 'noMore';
		} else {
			this.reload = false;
			this.current_page = this.current_page + 1; //页码+1
			this.status = 'loading';
			this.loadData();
		}
	},
	methods: {
		hideBuyModal(){
			this.showBuyPiPei = false;
		},
		hideBuyInfoModal(){
			this.showBuyGongsi = false;
		},
		async loadData() {
			if(this.tab_type === 0){
				await uni.request({
					url: '/good/goodorder',
					method: 'GET',
					data: {
						page: this.current_page,
					},
					success: res => {
						uni.stopPullDownRefresh();
						if(this.current_page == 1){
							this.dataList = [];
						}
						
						this.dataList = this.reload ? res.data.data : this.dataList.concat(res.data.data);//数据 追加
						this.total = res.data.total; //数据量
						this.current_page = res.data.current_page; //当前页码
						this.last_page = res.data.last_page; //总页码
						this.status = res.data.total == 0 ? 'noMore' : 'more';
					}
				});
			}
			
			if(this.tab_type === 1){
				await uni.request({
					url: '/good/good',
					method: 'GET',
					data: {
						page: this.current_page,
					},
					success: res => {
						uni.stopPullDownRefresh();
						this.dataList = this.reload ? res.data.data : this.dataList.concat(res.data.data);//数据 追加
						this.total = res.data.total; //数据量
						this.current_page = res.data.current_page; //当前页码
						this.last_page = res.data.last_page; //总页码
						this.status = res.data.total == 0 ? 'noMore' : 'more';
					}
				});
			}
			
		},
		changeTabType(tab_type){
			this.tab_type = tab_type;
			this.total = 0;
			this.current_page = 1;
			this.last_page = 1;
			this.dataList = [];
			this.loadData();
		},
		buyGood(item){
			//匹配单
			if(this.tab_type === 0){
				this.showBuyPiPei = true;
				this.curGoods = item;
			}
			
			//公司单
			if(this.tab_type === 1){
				this.showBuyGongsi = true;
				this.curGoods = item;
			}
		},
		changeCurType(type){
			this.curType = type;
		},
		submitPipei(){
			if(!this.name){
				this.$wanlshop.msg('买家姓名不能为空');
				return false;
			}
			
			if(!this.phone){
				this.$wanlshop.msg('买家电话不能为空');
				return false;
			}
			
			uni.request({
				url: '/good/goodordergm',
				method: 'POST',
				data: {
					id: this.curGoods.id,
					name: this.name,
					phone: this.phone,
				},
				success: res => {
					if(res.code == 1 || res.res.code == 1){
						this.showBuyPiPei = false;
						this.$wanlshop.msg('提交成功');
					}else{
						this.$wanlshop.msg(res.msg);
					}
					
				}
			});
		},
		submitGongsi(){
			
			//寄售
			if(this.curType === 0){
				if(!this.name){
					this.$wanlshop.msg('收款人姓名不能为空');
					return false;
				}
				
				if(!this.phone){
					this.$wanlshop.msg('收款人电话不能为空');
					return false;
				}
				
				if(!this.address){
					this.$wanlshop.msg('请上传收款人二维码');
					return false;
				}
			}
			
			uni.request({
				url: '/good/goodorderadd',
				method: 'POST',
				data: {
					id: this.curGoods.id,
					type: this.curType,
					name: this.name,
					phone: this.phone,
					address: this.address,
				},
				success: res => {
					if(res.code == 1 ||res.res.code == 1){
						this.showBuyGongsi = false;
						this.$wanlshop.msg('提交成功');
					}else{
						this.$wanlshop.msg(res.msg);
					}
				}
			});
		},
		handleImage() {
			let _this = this;
			
			uni.chooseImage({
				crop: {
					quality: 60
				},
				success: res => {
					uni.request({
						url: '/wanlshop/common/uploadData',
						success: updata => {
							for (let i = 0; i < res.tempFilePaths.length; i++) {
								// 读取图片宽高
								uni.getImageInfo({
									src: res.tempFilePaths[i],
									success: image => {
										uni.uploadFile({
											url: updata.data.uploadurl,
											filePath: image.path,
											name: 'file',
											formData:updata.data.storage == 'local' ? null : updata.data.multipart,
											header:{
												token: _this.user.token,
											},
											success: data => {
												this.address = JSON.parse(data.data).data.url;
												this.showImage = res.tempFilePaths[i];
											},
											fail: error =>{
												uni.showToast({title: JSON.parse(error.data).msg, icon: 'error', position: true});
											}
										});
									}
								});
							}
						}
					});
				}
			});
		},
		back(){
			uni.navigateBack({
				 delta: 1
			})
		}
		
	}
}	
</script>



<style lang="scss" scoped>
.score-shop-image{
	width: 750rpx;
	height: 371rpx;
}

.header-box{
	width: 702rpx;
	background: #FFFFFF;
	border-radius: 20rpx;
	position: absolute;
	top: 200rpx;
	margin-left: 24rpx;
	padding: 35rpx 29rpx;
}

.score-title-main{
	font-size: 32rpx;
	font-family: PingFang SC;
	font-weight: 700;
	color: #292929;
}

.score-image{
	width: 48rpx;
	height: 48rpx;
}

.score-title{
	font-size: 22rpx;
	font-family: PingFang SC;
	font-weight: 400;
	color: #292929;
	margin-top: 23rpx;
}

.score-item{
	display: flex;
	flex-direction: column;
	align-items: center;
}
.score-icon{
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 32rpx;
}

.detail-title-avtive{
	font-size: 32rpx;
	font-family: PingFang SC;
	font-weight: 700;
	color: #366BEB;
}

.detail-title{
	font-size: 32rpx;
	font-family: PingFang SC;
	font-weight: 700;
	color: #292929;
}

.detail-line-active{
	width: 42rpx;
	height: 5rpx;
	background: #366BEB;
	margin-top: 12rpx;
}

.detail-line{
	width: 42rpx;
	height: 5rpx;
	background: #F7F7F7;
	margin-top: 12rpx;
}

.mt120{
	margin-top: 100rpx;
	margin-left: 24rpx;
}
.detail-left{
	display: flex;
	align-items: center;
	flex-direction: column;
	margin-right: 92rpx;
}



.shop-box{
	margin-top:36rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	margin-left: 24rpx;
	margin-right: 24rpx;
}

.item{
	width: 337rpx;
	height: 443rpx;
	background: #FFFFFF;
	border-radius: 20rpx;
	margin-bottom: 28rpx;
}

.shop-image{
	width: 337rpx;
	height: 268rpx;
	border-top-left-radius: 20rpx;
	border-top-right-radius: 20rpx;
}

.shop-title{
	font-size: 28rpx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #292929;
	margin-top: 10rpx;
	margin-left: 21rpx;
}

.shop-price{
	font-size: 28rpx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #F53938;
	margin-top: 10rpx;
	margin-left: 21rpx;
}

.shop-btn{
	margin-top: 16rpx;
	width: 148rpx;
	height: 45rpx;
	background: #366BEB;
	border-radius: 22rpx;
	font-size: 24rpx;
	font-family: PingFang SC;
	font-weight: 400;
	color: #FFFFFF;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-left: 21rpx;
}

.close-image{
	width: 43rpx;
	height: 43rpx;
}

.confirm-title{
	font-size: 32rpx;
	font-family: PingFang SC;
	font-weight: 700;
	color: #292929;
	margin-right: 245rpx;
}

.product-box{
	width: 702rpx;
	height: 200rpx;
	background: #FFFFFF;
	border-radius: 20rpx;
	display: flex;
	padding: 20rpx;
	margin-top: 20rpx;
}

.product-image{
	width: 160rpx;
	height: 160rpx;
	border-radius: 20rpx;
	margin-right: 31rpx;
}

.product-title{
	width: 457rpx;
	font-size: 28rpx;
	font-family: PingFang SC;
	font-weight: 700;
	color: #292929;
	line-height: 42rpx;
	text-align: left;
}

.product-price{
	font-size: 28rpx;
	font-family: PingFang SC;
	font-weight: 400;
	color: #F53938;
	line-height: 42rpx;
}

.submit-btn{
	width: 702rpx;
	height: 88rpx;
	background: #366BEB;
	border-radius: 20rpx;
	font-size: 28rpx;
	font-family: PingFang SC;
	font-weight: 400;
	color: #FFFFFF;
	line-height: 42rpx;
	margin-top: 44rpx;
	margin-bottom: 42rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}

.choose-btn-active{
	width: 313rpx;
	height: 88rpx;
	background: #F6F9FF;
	border: 2px solid #366BEB;
	border-radius: 20rpx;
	font-size: 30rpx;
	font-family: PingFang SC;
	font-weight: 400;
	color: #366BEB;
	line-height: 42rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
}

.choose-image{
	width: 19rpx;
	height: 14rpx;
	position: absolute;
	right: 8rpx;
	bottom: 8rpx;
}

.choose-bg-image{
	width: 37rpx;
	height: 33rpx;
	position: absolute;
	right: -1rpx;
	bottom: -1rpx;
}

.choose-btn2{
	width: 313rpx;
	height: 88rpx;
	background: #F7F7F7;
	border-radius: 20rpx;
	font-size: 30rpx;
	font-family: PingFang SC;
	font-weight: 400;
	color: #666666;
	line-height: 42rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
}

.choose-box{
	width: 702rpx;
	height: 214rpx;
	background: #FFFFFF;
	border-radius: 16rpx;
	margin-top: 20rpx;
	padding: 35rpx 29rpx;
}

.wuliu{
	font-size: 28rpx;
	font-family: PingFang SC;
	font-weight: 400;
	color: #000000;
	line-height: 42rpx;
	margin-bottom: 28rpx;
	text-align: left;
}

.info-box{
	width: 702rpx;
	background: #FFFFFF;
	border-radius: 20rpx;
	padding: 0rpx 29rpx 28rpx 29rpx;
	text-align: left;
	margin-top: 20rpx;
}

.info-input-box{
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 100rpx;
	border-bottom: 1rpx solid #EBEBEB;
	
	input{
		text-align: right;
	}
}
.input-title{
	font-size: 30rpx;
	font-family: PingFang SC;
	font-weight: 400;
	color: #292929;
}

.info-image-box{
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 36rpx;
}

.photo-image-box{
	width: 120rpx;
	height: 120rpx;
	border: 1rpx dashed #666666;
	border-radius: 20rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}

.photo-image-box2{
	width: 120rpx;
	height: 120rpx;
	border-radius: 20rpx;
}

.photo-image{
	width: 48rpx;
	height: 48rpx;
}

.photo-image2{
	width: 100%;
	height: 100%;
	border-radius: 20rpx;
}

.photo-title{
	font-size: 20rpx;
	font-family: PingFang SC;
	font-weight: 400;
	color: #666666;
	margin-top: 9rpx;
}

.footer-box{
	width: 750rpx;
	height: 176rpx;
	background: #FFFFFF;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0rpx 25rpx;
	margin-top: 48rpx;
}

.heji{
	font-size: 28rpx;
	font-family: PingFang SC;
	font-weight: 400;
	color: #999999;
	line-height: 42rpx;
	margin-right: 20rpx;
}

.footer-price{
	font-size: 32rpx;
	font-family: PingFang SC;
	font-weight: 400;
	color: #F53938;
	line-height: 42rpx;
}

.pay_now{
	width: 274rpx;
	height: 88rpx;
	background: #366BEB;
	border-radius: 20rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	color:white;
}

.bg-header{
	width: 750rpx;
	height: 371rpx;
	background-image: url('https://yxs.duoduoduo.work/uploads/20230218/9f5ae7f07423514ce0b6d4662087e2de.png');
	background-size: 100% 100%;
}

</style>